<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/ html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="file:///android_asset/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
		var data1 =$data;
		var strCategories= $strCategories;
$(function () {
    // Create the chart
    $('#container').highcharts({
        chart: {
                        type: 'column'
        },
        title: {
            text: ''
        },
        subtitle: {
           text: ' '
        },
        xAxis: {
         categories:strCategories
        },
        yAxis: {
            title: {
                text: ''
            }

        },
        legend: {
            enabled: false
        },
        plotOptions: {
          series: {
              cursor: 'pointer',
               events: {
	          	  click: function() {
	          	     javascript:AndroidFunction.startFunction(event.point.category);
	          	}
	          },
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },

        series: [{
            name: 'Brands',
            colorByPoint: true,
            data:data1
        }],
    });
});


    </script>
</head>
<body>
<script src="file:///android_asset/highcharts.js"></script>
<script src="file:///android_asset/modules/data.js"></script>
<script src="file:///android_asset/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
